.grade-box-container {
  display: flex;
}

.grade-box.active:first-child {
  border-left: none;
}
.grade-box:first-child {
  margin-left: 0;
}
.grade-box {
  background-color: var(--background);
  color: var(--text-secondary);
  border-top: calc(1px * 2) solid var(--surface-subtle);
}
.grade-box:last-child {
  border-right: calc(1px * 2) solid var(--surface-subtle);
}

.grade-box.a {
  --pfe-health-index--accent: var(--status-success);
  --pfe-health-index--accent--text: var(--accent-text);
}
.grade-box.b {
  --pfe-health-index--accent: var(--status-success-bright);
  --pfe-health-index--accent--text: var(--accent-text);
}
.grade-box.c {
  --pfe-health-index--accent: var(--status-warning);
  --pfe-health-index--accent--text: var(--accent-text);
}
.grade-box.d {
  --pfe-health-index--accent: var(--warning-500);
  --pfe-health-index--accent--text: var(--accent-text);
}
.grade-box.e {
  --pfe-health-index--accent: var(--status-danger);
  --pfe-health-index--accent--text: var(--accent-text);
}

.grade-box .grade {
  padding: 6px 10px;
}
.grade-box>.bottom {
  height: 0.5em;
  margin: 0 0.5px;
}
.grade-box.active .grade {
  margin: calc(1px * -2) 0.5px 0 0.5px;
  padding-top: 8px !important;
}
.grade-box.active .grade, .grade-box>.bottom {
  background-color: var(--pfe-health-index--accent);
  color: var(--pfe-health-index--accent--text);
}
